<template>
	<navigatorComp :title="title" bgcColor="#F6F6F6" fontColor="#0E0E0E"></navigatorComp>

	<view class="content" :style="{ height: height + 'px' }">
		<image src="http://112.124.50.179:8888/imgs/service/success.png" mode=""></image>
		<view class="submit_success">提交成功</view>
		<view class="submit_info">
			您的提交已成功，咨询信息已接收。我们的客服团队将在24小时内与您联系。感谢您的耐心等待。
		</view>
		<view class="submit_footerBtn">
			<myButton bgcColor="none" name="确定" width="400rpx" @clickBtn="goBack"></myButton>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import myButton from '/components/button/index.vue';
	const title = ref('');
	const height = ref(0);
	onLoad((options) => {
		title.value = options.title;

		// #ifdef MP-WEIXIN
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(64);
		// #endif

		// #ifdef APP || H5
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(88) -
			uni.upx2px(64);
		// #endif
	});

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		margin: 32rpx;
		border-radius: 26rpx;
		overflow: hidden;
		background-color: #fff;
		box-sizing: border-box;
		width: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 64rpx;
		position: relative;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 24rpx;
			margin-top: 72rpx;
		}

		.submit_success {
			font-weight: 500;
			font-size: 32rpx;
			color: #0e0e0e;
			line-height: 38rpx;
			margin-bottom: 24rpx;
		}

		.submit_info {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 42rpx;
			text-align: justify;
		}

		.submit_footerBtn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 120rpx;
		}
	}
</style>